<template>
	<view class="message-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<uni-nav-bar :border="false" backgroundColor="#ffffff" statusBar>
				<template v-slot:default>
					<view class="nav-center">
						<text class="nav-title">消息</text>
						<view class="trash-icon" @click="handleTrash" :hover-class="'trash-icon-hover'"
							:hover-stay-time="100">
							<uni-icons type="trash" size="20" color="#666"></uni-icons>
						</view>
					</view>
				</template>
				<template v-slot:right>
					<view class="settings-icon" @click="handleSettings">
						<uni-icons type="gear" size="20"></uni-icons>
					</view>
				</template>
			</uni-nav-bar>

			<!-- 功能菜单 -->
			<scroll-view scroll-x class="function-menu" :show-scrollbar="false">
				<view class="menu-wrapper">
					<view v-for="(item, index) in menuItems" :key="index"
						:class="['menu-item', { active: currentIndex === index }]" @click="switchTab(index)">
						<image class="menu-icon" :src="item.icon" mode="aspectFit"></image>
						<text class="menu-text">{{ item.text }}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 消息内容区域 -->
		<!-- 消息内容区域 - 使用swiper -->
		<swiper class="message-wrapper" :current="currentIndex" @change="handleSwiperChange">
			<!-- 对话内容 -->
			<swiper-item>
				<scroll-view scroll-y class="swiper-scroll">
					<view class="empty-state">
						<image class="empty-image" src="/static/logo.png" mode="aspectFit"></image>
						<text class="empty-text">暂无对话消息</text>
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 销售内容 -->
			<swiper-item>
				<scroll-view scroll-y class="swiper-scroll">
					<view class="empty-state">
						<image class="empty-image" src="/static/logo.png" mode="aspectFit"></image>
						<text class="empty-text">暂无销售消息</text>
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 财务内容 -->
			<swiper-item>
				<scroll-view scroll-y class="swiper-scroll">
					<view class="empty-state">
						<image class="empty-image" src="/static/logo.png" mode="aspectFit"></image>
						<text class="empty-text">暂无财务消息</text>
					</view>
				</scroll-view>
			</swiper-item>

			<!-- 其他内容项... -->
			<swiper-item v-for="(item, index) in menuItems.slice(3)" :key="index + 3">
				<scroll-view scroll-y class="swiper-scroll">
					<view class="empty-state">
						<image class="empty-image" src="/static/logo.png" mode="aspectFit"></image>
						<text class="empty-text">暂无{{ item.text }}消息</text>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '消息',
			currentIndex: 0,
			menuItems: [
				{ text: '对话', icon: '/static/logo.png' },
				{ text: '销售', icon: '/static/logo.png' },
				{ text: '财务', icon: '/static/logo.png' },
				{ text: '统计', icon: '/static/logo.png' },
				{ text: '服务', icon: '/static/logo.png' },
				{ text: '系统', icon: '/static/logo.png' },
				{ text: '审批', icon: '/static/logo.png' },
				{ text: '公告', icon: '/static/logo.png' },
				{ text: '设备', icon: '/static/logo.png' }
			]
		}
	},
	onLoad() {

	},
	// 在每个TabBar页面的onShow方法中添加
	onShow() {
		uni.$emit('tabChange');
	},
	methods: {
		handleTrash() {
			// 处理清空消息
		},
		handleSettings() {
			// 跳转到消息通知设置页面
			uni.navigateTo({
				url: '/pages/message/settings'
			});
		},
		// 添加新方法
		switchTab(index) {
			this.currentIndex = index;
		},

		handleSwiperChange(e) {
			this.currentIndex = e.detail.current;
		}
	}
}
</script>

<style lang="scss" scoped>
.message-container {
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #f5f5f5;
	position: relative;
	/* 保留底部安全区域 */
	padding-bottom: env(safe-area-inset-bottom);
}

.header {
	background-color: #ffffff;
}

.nav-center {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;

	.nav-title {
		font-size: 30rpx;
		font-weight: normal;
		color: #333;
	}

	.trash-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40rpx;
		height: 40rpx;
		background-color: #e6e6e6;
		border-radius: 50%;
	}

	.trash-icon-hover {
		background-color: #ffffff;
	}
}

.header-icons {
	display: flex;
	align-items: center;


	.settings-icon {
		padding: 0 10rpx;
		margin-left: 10rpx;
	}
}

.function-menu {
	white-space: nowrap;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
}

.menu-wrapper {
	display: flex;
	width: 100%;
}

.menu-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: calc(100% / 7);
	flex-shrink: 0;
	padding: 10rpx 0;
	transition: all 0.3s;

	&.active {
		color: #1890ff;

		.menu-text {
			color: #1890ff;
			font-weight: 500;
		}
	}
}

.menu-icon {
	width: 50rpx;
	height: 50rpx;
	margin-bottom: 10rpx;
}

.menu-text {
	font-size: 24rpx;
	color: #333;
}

.message-wrapper {
	flex: 1;
	width: 100%;
	overflow: hidden;
}
.swiper-scroll {
	height: 100%;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60rpx 0;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 20rpx;
	opacity: 0.5;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}
</style>